// @import "../../../node_modules/codemirror/lib/codemirror.css";
// @import "../../../node_modules/codemirror/theme/eclipse.css";
@import "../../lib/design-system/custom/variables.css";
@import "../../lib/design-system/custom/base.css";

$theme-primary-color: #0a48b3;
$theme-primary-color-gradient: linear-gradient(87deg, #0b52cb 0, $theme-primary-color 100%);

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-thumb {
  border-radius: 1rem;
  background-color: rgba(164, 164, 164, 0.227);
}

::-webkit-scrollbar-track {
  background-color: transparent;
}

li {
  list-style: none;
}

input.ant-input:not(.ant-input-sm):not(.ant-input-lg) {
  padding: 8px;
}

button.ant-btn {
  font-size: var(--requestly-font-size-sm, 13px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

button.ant-btn-lg {
  font-size: var(--requestly-font-size-lg, 16px);
}

button.ant-input-search-button {
  height: auto;
}

.has-no-box-shadow,
.has-no-box-shadow:hover,
.has-no-box-shadow:active,
.has-no-box-shadow:focus {
  box-shadow: none;
}

.has-modern-border {
  border: 1px solid #cad1d73f;
}

//rule view card head top margin
.sm-margin-top-negative-3 {
  @media screen and (max-width: 768px) {
    margin-top: -3rem !important;
  }
}

.margin-bottom-1-when-xs {
  @media screen and (max-width: 576px) {
    margin-bottom: 1rem !important;
  }
}
.margin-bottom-1-when-sm {
  @media screen and (max-width: 768px) {
    margin-bottom: 1rem !important;
  }
}
.margin-bottom-1-when-md {
  @media screen and (max-width: 992px) {
    margin-bottom: 1rem !important;
  }
}

:root {
  .mb-2 {
    margin-bottom: 2em;
  }
  .mb-3 {
    margin-bottom: 3em;
  }
  .mb-4 {
    margin-bottom: 4em;
  }
  .mb-8 {
    margin-bottom: 8em;
  }
  .mt-1 {
    margin-top: 1em;
  }

  .mt-4 {
    margin-top: 4em;
  }

  .ml-1 {
    margin-left: calc(var(--requestly-space-1) * 1);
  }

  .ml-2 {
    margin-left: calc(var(--requestly-space-1) * 2);
  }

  .ml-3 {
    margin-left: calc(var(--requestly-space-1) * 3);
  }

  .ml-4 {
    margin-left: calc(var(--requestly-space-1) * 4);
  }
}

// modal width
.max-width-80-percent {
  max-width: 80%;
}
.max-width-70-percent {
  max-width: 70%;
}

//Filter modal
.max-width-60-percent {
  max-width: 60%;
}

.has-no-border {
  border: none;
}

.margin-top-one {
  margin-top: 1rem;
}

.margin-bottom-one {
  margin-bottom: 1rem;
}

.margin-left-one {
  margin-left: 1rem;
}

//modal modify
.zero-padding-bottom {
  padding-bottom: 0em;
}

.one-padding-top {
  padding-top: 1rem;
}
.one-padding-bottom {
  padding-bottom: 1rem;
}
.has-dark-text,
.has-dark-text:focus {
  color: #4a5868;
}

// Script rule editor
.codemirror-character-count {
  font-size: 0.8em;
  font-weight: 500;
}

//Spin Icons
.icon-spin {
  -webkit-animation: icon-spin 2s infinite linear;
  animation: icon-spin 2s infinite linear;
}

@-webkit-keyframes icon-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}

@keyframes icon-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}

.reduce-opacity-on-hover:hover {
  opacity: 0.8;
}

.no-bottom-border {
  border-bottom: none;
}

.fix-icon-is-down {
  transform: translate(0%, -5%);
}

.fix-icon-is-up {
  transform: translate(0%, 12%);
}

.mr-1 {
  margin-right: 1%;
}
.mr-2 {
  margin-right: 2%;
}
.ml-2 {
  margin-left: 2%;
}
.mr-5-px {
  margin-right: 5px;
}

.ml-8 {
  margin-left: 8%;
}
.mr-9 {
  margin-right: 9px !important;
}

.bw-color-on-hover {
  filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: gray; /* IE 6-9 */
}
.bw-color-on-hover:hover {
  -webkit-filter: none;
  -moz-filter: none;
  -ms-filter: none;
  filter: none;
  transform: scale(1.1);
}

.ant-pro-global-footer-links .ant-typography {
  color: rgba(0, 0, 0, 0.45);
  transition: all 0.3s;
  margin-right: 40px;
  cursor: pointer;
}
.ant-pro-global-footer-links .ant-typography:hover {
  color: rgba(0, 0, 0, 0.85);
}

// Dropdown
.ant-dropdown-menu-item .ant-dropdown-menu-title-content span {
  display: inline-block;
  font-size: var(--requestly-font-size-sm, 13px);
}

.ant-table-tbody > tr.ant-table-row-selected > td {
  background: #393f48;
}

.ant-modal-close {
  background-color: unset;
}

.ant-card-actions {
  border-top: none;
}

.fix-primary2-color {
  color: $theme-primary-color;
}

.fix-primary2-color {
  color: #4da9ff;
}

.ant-drawer-close {
  background-color: unset;
}

.ant-descriptions-bordered .ant-descriptions-item-label {
  background-color: #393f48;
}

.ant-descriptions-item-label {
  color: #ffffff;
}

.ant-descriptions-item-content {
  color: #ffffff;
}

.ant-result-title {
  color: white;
}

.ant-result-subtitle {
  color: whitesmoke;
}

.ant-modal-body {
  color: whitesmoke;
}

.ant-alert-close-icon {
  background-color: transparent;
}

.overflow-y-auto .ant-table-body {
  overflow-y: auto !important;
}

.ant-alert-message a.ant-typography {
  font-weight: bolder;
}

.hp-text-color-danger-3 {
  color: lightpink !important;
}

// React-Select Input box
input[id^="react-select-"] {
  color: whitesmoke !important;
}

.ant-badge-status-processing {
  background-color: whitesmoke;
}

.ant-modal-confirm-body .ant-modal-confirm-title {
  color: white;
}

.ant-modal-confirm-body .ant-modal-confirm-content {
  color: white;
}

//goodbye feedback form
.goodbye-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 1.5rem;
}

.ant-modal-confirm-success {
  width: 750px !important;
}

@keyframes rotate {
  100% {
    transform: rotate(1turn);
  } // or 360deg
}

//mock type tag
.mock-tag {
  font-weight: 500;
  border: 1px solid var(--border);
  border-radius: var(--border-radius-sm);
  background: var(--requestly-color-surface-1);
  padding: 5px;
}

.rq-count-badge {
  padding: 3px 5px;
  font-size: 10px;
  line-height: 10px;
  color: var(--requestly-color-success);
  background-color: transparent;
  border-radius: var(--border-radius-sm);
  border: 1px solid var(--requestly-color-success);
}

/* spinner & skeleton */
.spinner-card {
  padding: 24px;
  display: flex;
  align-items: center;
}

/* buttons & icons */
.header-icon,
.ant-btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

.ant-menu-item .remix-icon {
  min-width: 20px;
}

.ant-btn-dashed {
  border-color: #4f5053;
}

.checkbox {
  margin-right: 0.4rem;
  margin-top: 0.3rem;
}

.card-body .row {
  margin-top: 0.6rem;
  box-shadow: none;
}

.dropdown .dropdown-menu {
  display: none;
  pointer-events: none;
}

.dropdown.show .dropdown-menu {
  display: flex;
  flex-direction: column;
  pointer-events: all;
  position: absolute;
  left: 50% !important;
  top: 70% !important;
  background: #fff;
  padding: 0.4rem;
  z-index: 500;
  transform: translate(-50%, -50%) !important;
  width: 80% !important;
}

/* header */
.alert .ant-alert-message {
  overflow: hidden;
  text-overflow: ellipsis;
}

.desktop-auth-message {
  padding: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media screen and (min-width: 64em) {
  .ant-table-ping-right:not(.ant-table-has-fix-right) .ant-table-container::after {
    box-shadow: none;
  }
}

.signin-link {
  padding: 0 6px 0 0;
  border: none !important;
}

.ant-btn-link.signin-link:hover,
.ant-btn-link.signin-link:focus {
  background: none !important;
  text-decoration: underline;
}

/* user info */
.ant-btn .anticon {
  margin: 4px 0;
}

.ant-input-search-button .anticon {
  margin: 11px 0;
}

.icon-wrapper {
  width: 1.75rem;
  height: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-wrapper-sm {
  width: 13px;
  height: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text-gray);
  margin-right: 5px;
}

.icon-wrapper svg {
  width: 1.1rem;
  height: 1.1rem;
  color: var(--text-gray);
}

.ant-dropdown-menu.ant-dropdown-menu-root .ant-dropdown-menu-item.ant-dropdown-menu-item-active {
  color: var(--requestly-color-text-default);
}

/* react multi email */
div.react-multi-email {
  border: 1px solid transparent;
  box-shadow: var(--input-box-shadow);
  background-color: var(--requestly-color-surface-0);
}

div.react-multi-email:hover {
  cursor: text;
  border-color: #2051b4;
  transition: border 0.2s;
}

div.react-multi-email > input {
  color: var(--requestly-color-text-default);
  background-color: var(--requestly-color-surface-0);
}

div.react-multi-email.focused {
  border: 1px solid var(--requestly-color-primary);
  box-shadow: 0 0 0 2px rgb(30 105 255 / 20%);
  background-color: var(--requestly-color-surface-0);
}

div.react-multi-email .multi-email-tag {
  font-size: var(--requestly-font-size-sm, 12px);
  font-weight: 400;
  padding: 4px 8px;
  color: var(--requestly-color-text-default);
  border: 1px solid var(--border);
  border-radius: var(--border-radius-sm);
  background-color: var(--requestly-color-surface-1);
}

.records-table.ant-pro-table .ant-table-tbody tr td a:hover,
.records-table.ant-pro-table .ant-table-tbody tr td a span:hover,
.records-table.ant-table-wrapper .ant-table-tbody tr td a:hover {
  color: var(--link-color);
  text-decoration: underline;
}

.ant-btn.ant-btn-default:focus:not(.ant-btn-icon-only),
.ant-btn.ant-btn-default:hover:not(.ant-btn-icon-only) {
  color: var(--requestly-color-text-default);
  border: 1px solid #343434;
  background-color: var(--requestly-color-surface-2);
}

.upgrade-workspace-selector-dropdown {
  & .ant-dropdown-menu {
    overflow: auto;
    max-height: 400px;

    &::-webkit-scrollbar-track {
      background-color: var(--requestly-color-surface-1);
    }
  }

  & .ant-dropdown-menu-item .ant-dropdown-menu-title-content {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 250px;
  }
}

#credential_picker_container {
  top: 45px !important;
}

// TODO: Update modal design system and remove this class
.custom-rq-modal {
  & .ant-modal {
    & .ant-modal-content {
      background: var(--requestly-color-surface-0);
      & .ant-modal-header {
        background: var(--requestly-color-surface-0);
        & .ant-modal-title {
          color: var(--requestly-color-text-default);
        }
      }
      & .ant-modal-footer {
        background: var(--requestly-color-surface-0);
      }
    }
  }
}

.ant-message .ant-message-notice-content {
  background: var(--requestly-color-black);
}

// TEMPORARY: To be removed after TOOLTIP component is added in design system
.rq-tooltip .ant-tooltip-inner {
  background: var(--requestly-color-black);
  color: var(--requestly-color-text-default);
  font-size: var(--requestly-font-size-sm);
}

.rq-tooltip .ant-tooltip-arrow .ant-tooltip-arrow-content {
  color: var(--requestly-color-text-default);
  --antd-arrow-background-color: var(--requestly-color-black);
}

// All tooltips to have sm font size
.ant-tooltip-inner {
  // Our new -sm token has 13px value while DS has 12px
  font-size: var(--requestly-font-size-sm, 12px);
}

.fc-widget-normal {
  bottom: 8px !important;
  right: 8px !important;
}
